<template>
  <div>
   demo2 ref：{{count}} reactive：{{countReactive.num}} toRefs解构：{{name}}
   <input type="text" placeholder="输入" ref="root"/>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref,toRefs,onMounted,watch,watchEffect } from "vue";
const count = ref<number>(0)
console.log('count',count.value)
count.value ++
interface ReactiveObj {
    num:number,
    name:string
}
const countReactive = reactive<ReactiveObj>({
    num:122,
    name:'小米'
});
watch(()=>countReactive.num,(count,preCount)=>{

})
const timer = setInterval(()=>{
    countReactive.num ++
},500)
watchEffect((onInvalidate)=>{
    console.log('countReactive.num',countReactive.num)
    onInvalidate(()=>{
        //清除副作用
        console.log('听用监听')
        clearInterval(timer)
    })
})

const root = ref(null);
onMounted(():void=>{
    console.log('ref引用',root.value)
})
const { name } = {...toRefs(countReactive)}

</script>
<style scoped></style>
